<template>
  <div class="Index">
    <div class="header">
      <input class="input" type="text" v-model="keyword" placeholder="搜索">
      <i class="iconfont iconrichscan_icon scan-btn" hover-class="hover" hover-start-time="0" hover-stay-time="0" @click="handleScan"></i>
    </div>
    <van-tabs
      v-if="activeNav"
      :active="activeNav"
      @change="handleNavChange"
      sticky
      swipeable
    >
      <van-tab v-for="item in types" :key="item.value" :name="item.value" :title="item.name">
        <ListPanel :type="item.value" :activeNav="activeNav" :keyword="keyword" :reachBottomTime="reachBottomTime" :pullDownRefreshTime="pullDownRefreshTime" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ListPanel from './ListPanel'
import { navToFace } from '@/utils/face'

export default {
  components: {
    ListPanel,
  },
  data () {
    return {
      activeNav: '',
      reachBottomTime: Date.now(),
      pullDownRefreshTime: Date.now(),
      keyword: '',
    }
  },
  computed: {
    types () {
      if (['1', '2'].includes(this.activeNav)) {
        return [
          {
            name: '所有活动',
            value: '1',
          },
          {
            name: '我的活动',
            value: '2',
          },
        ]
      } else if (['3', '4'].includes(this.activeNav)) {
        return [
          {
            name: '所有会议',
            value: '3',
          },
          {
            name: '我的会议',
            value: '4',
          },
        ]
      } else {
        return []
      }
    },
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  onLoad () {
    this.activeNav = '1'
  },
  onShow () {
    console.log('this.userInfo', this.userInfo)
    if (!this.userInfo.certificate) {
      uni.switchTab({
        url: '/pages/home/index',
      })
      uni.showModal({
        title: '未实名认证',
        content: '很抱歉，您还未实名认证，是否立刻实名认证？',
        success ({ confirm, cancel }) {
          if (confirm) {
            navToFace()
          }
          if (cancel) {
            uni.navigateBack()
          }
        },
      })
    } else if (!this.userInfo.npcmember) {
      uni.switchTab({
        url: '/pages/home/index',
      })
      uni.showModal({
        title: '非人大代表',
        content: '很抱歉，您不是人大代表，无法使用此功能！请联系所在选区管理员，在后台添加人大代表档案信息！',
        showCancel: false,
      })
    }
    const tabBarParams = this.$store.state.tabBarParams
    if (Date.now() - tabBarParams.time < 1000) {
      this.activeNav = tabBarParams.params.activeNav || '1'
    }
  },
  onReachBottom () {
    this.reachBottomTime = Date.now()
  },
  onPullDownRefresh () {
    this.pullDownRefreshTime = Date.now()
  },
  methods: {
    handleNavChange (e) {
      this.activeNav = e.detail.name
    },
    handleScan () {
      wx.scanCode()
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.Index {
	.header {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 59px;
		margin-bottom: 10px;
		background: #fff;

		.input {
			width: 542rpx;
			height: 35px;
			padding: 0 20px;
			border-radius: 4px;
			text-align: center;
			background: #f2f0f0;
		}

		.scan-btn {
			font-size: 24px;
			color: #999;

			&.hover {
				opacity: .8;
			}
		}
	}
}
</style>
